<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>电子商务网站放大镜效果</title>
    <style type="text/css">
        html, body, div {  margin: 0;  padding: 0;  }
        #tab {  position: relative;  width: 300px;  height: 300px;margin: 50px ;  background: #CDE074;  }
        #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
        #container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
        #bigImg{ position:absolute; display:block; border:none;}
    </style>
</head>
<body>
    <div id="tab">
        <img src="img/smallPeony.jpg" width="300" height="300" id="img1">
    </div>
<div id="jiance"></div>
</body>
</html>
<script type="text/javascript">
    var oTab = document.getElementById("tab");
    //获得oDiv本身的高和宽；获得oDiv距离浏览器左上角的位移；
    var tabT = oTab.offsetTop;
    var tabL = oTab.offsetLeft;
    var tabW = oTab.offsetWidth;
    var tabH = oTab.offsetHeight;

    //onmouseenter限制冒泡机制
    oTab.onmouseenter = function (e) {
        //创建大图容器
        var container = document.createElement("div");
        container.id = "container";
        this.appendChild(container);

        var bigImg=document.createElement("img");
        bigImg.src="img/peony.jpg";
        bigImg.id="bigImg";
        container.appendChild(bigImg);

        //当鼠标移近来的时候，动态创建一个DIV元素，id是mark
        var mark = document.createElement("div");
        mark.id = "mark";
        this.appendChild(mark);//像oTab里添加mark；

        //执行setMark
        setMark(mark, container, e);
    };

    oTab.onmousemove = function (e) {
        var mark = document.getElementById("mark");
        if (mark) {
            //先判断mark是否存在，如果存在，执行setMark
            setMark(mark, container, e);
        }
    };

    //onmouseleave也可以显示冒泡机制;
    oTab.onmouseleave = function () {
        var mark = document.getElementById("mark");
        if (mark) {
            //当离开的时候移除mark节点；
            this.removeChild(mark);
            this.removeChild(container);
        }
    };

    var jiance=document.getElementById("jiance");
    function setMark(mark,container,e) {
        e = e || window.event;
        //上面是绑定事件的标配；
        //获取mark这个div的宽度和高度；并且让mark这个DIV显示在鼠标出现位置的正中间；
        var markW = mark.offsetWidth;
        var markH = mark.offsetHeight;
        var l = e.clientX - tabL - (markW / 2);
        var t = e.clientY - tabT - (markH / 2);
        mark.style.left = l + "px";
        mark.style.top = t + "px";
        container.style.left=tabW+10+"px";
        container.style.top=0;
        bigImg.style.left="-"+l/tabW*bigImg.width+"px";
        bigImg.style.top="-"+t/tabH*bigImg.height+"px";


        //下面是判断边界，当鼠标移到左边界和右边界的判断；
        if (l < 0) {
            mark.style.left = 0;
        } else if (l > (tabW - markW)) {
            mark.style.left = tabW - markW + "px";
            bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
        }
        //当鼠标移到上边界和下边界的判断；
        if (t < 0) {
            mark.style.top = 0 + "px";
        } else if (t > (tabH - markH)) {
            mark.style.top = tabH - markH + "px";
            bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
        }
    };
</script>